// 获取标签
// 开始按钮
var startBtn = document.querySelector(".menu img");
// log
var hesdEL = document.querySelector(".head");
// 开始
var menuEl = document.querySelector(".menu");
var endEl = document.querySelector(".end");
// 管道 ul
var pipesEl = document.querySelector("#pipes")

var birdImg = document.querySelector("#bird");
var scoreEl = document.querySelector('#score');
// 公共父标签
var bgEl = document.querySelector(".bg");
// 声音
var bulletMusic = document.querySelector("#bullet");
var gameMusic = document.querySelector("#ganmeMusic");

var gameoverMusic = document.querySelector("#ganmeOver");
var currentScoreEl = document.querySelector("#currentScore");
var bestScoreEl = document.querySelector("#bestScore");
//2  补充变量;
// 分数;
var num = 0;
// 小鸟下降
var birdUpTimer;
// 小鸟上升
var birdDownTimer;
// 每次点击小鸟上升的距离;
var speed = 0;
// ==============================
// 开始按钮
console.log(startBtn);
startBtn.onclick = function() {
        console.log(gameMusic);
        gameMusic.loop = true; //循环播放
        gameMusic.play();
        // yinc菜单
        hesdEL.style.display = "none";
        menuEl.style.display = "none";
        // 显示分数
        scoreEl.style.display = "block";
        birdImg.style.display = "block";
        // 取消冒泡事件
        event.cancelBubble = true;
        // 5.调用创建管道的函数
        setInterval(createPipe, 2000);
        // 小鸟下降
        birdDownTimer = setInterval(birdDownfunction, 20);
        // 将bgel点击事件开始
        bgEl.onclick = bgElClick;



    }
    // 创建管道-----
function createPipe() {
    var li = document.createElement("li");
    li.className = "pipe";
    li.style.left = bgEl.clientWidth + "px";
    // 添加到父标签ul中
    pipesEl.appendChild(li);
    // 设置管道
    // 设置小鸟通过高度130;
    var passHeight = 100;
    //最小高度 60;
    var minheight = 60;
    var maxHeight = li.clientHeight - passHeight - minheight;
    var topHeight = randomNumber(minheight, maxHeight);
    var bootmHeight = li.clientHeight - passHeight - topHeight;
    // ===========
    // 创建下管道
    var upDiv = document.createElement("div");
    upDiv.style.height = topHeight + "px";
    upDiv.className = "upPipe";
    li.appendChild(upDiv);
    var downDiv = document.createElement("div");
    downDiv.className = "downPipe";
    downDiv.style.height = bootmHeight + "px";
    li.appendChild(downDiv);
    // 4移动管道
    // 声明变量 储存 不断修改的left值
    var x = bgEl.clientWidth;
    var pipeMoveTimer = setInterval(function() {
        //管道和小鸟的碰撞检测;
        crash(upDiv);
        crash(downDiv);
        x--;
        li.style.left = x + "px";
        if (x < -li.clientWidth) {
            clearInterval(pipeMoveTimer);
            li.remove();
        }
        // 判断是否得分,因为小鸟居左62 管道宽度为62一旦管道居左为0,说明小鸟已经安全飞过;
        if (x == 0) {
            // 加分
            changeScore();
        }

    }, 10)
}
// 随机函数
function randomNumber(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}
//6 封装加分函数
function changeScore() {
    num++;
    if (num < 10) {
        scoreEl.innerHTML = "";
        // 小于10分 补充为01
        var img = document.createElement("img");
        img.src = "./img/" + num + ".jpg";
        scoreEl.appendChild(img);

    } else {
        scoreEl.innerHTML = "";
        // 是为
        var img1 = document.createElement("img");
        var shi = Math.floor(num / 10);
        img1.src = "./img/" + shi + ".jpg";
        scoreEl.appendChild(img1);
        var img2 = document.createElement("img");
        var ge = num % 10;
        img2.src = "./img/" + ge + ".jpg";
        scoreEl.appendChild(img2);
    }

}
// 7 小鸟上升函数;
function birdUpfunction() {
    // 换图
    birdImg.src = "./img/up_bird.png";
    // 设置小鸟的速度
    speed -= 0.5;
    // 判断一旦小于0
    if (speed < 0) {
        clearInterval(birdUpTimer);
        // 重置为0
        speed = 0;
        // 开启下降计时器
        birdDownTimer = setInterval(birdDownfunction, 20)

    }
    // 修改小鸟位置
    birdImg.style.top = birdImg.offsetTop - speed + "px";
    // 判断小鸟到顶
    if (birdImg.offsetTop <= 0) {
        // 游戏结束
        gameOverfunction()
    }
}
// 8.点击屏幕事件
function bgElClick() {
    //播放声音
    bulletMusic.play();
    // 定义速度
    speed = 6;
    // 3执行小鸟上升函数
    // 先清除上次的上升和下降  ;
    clearInterval(birdUpTimer);
    clearInterval(birdDownTimer);
    birdUpTimer = setInterval(birdUpfunction, 10)
}
// 9.小鸟下落的函数
function birdDownfunction() {
    birdImg.src = "./img/down_bird.png";
    // 设置速度
    speed += 0.25;
    if (speed > 3) {
        speed = 3;
    }
    // 修改小鸟的位置
    birdImg.style.top = birdImg.offsetTop + speed + "px";
    if (birdImg.offsetTop >= 423 - birdImg.clientHeight) {
        // 游戏结束
        gameOverfunction()
    }
}
// 10.游戏结束
function gameOverfunction() {
    gameoverMusic.play();
    gameMusic.pause();

    // 暂停计时器
    // 注意网页加载时会给所有计时器设置编号,从1开始!我们只要拿到本网页中最后一个计时器并且获取起编号,在从一开始清除计时器;就可清除所有计时器;
    var lastTimer = setInterval(function() {}, 10);
    for (var i = 1; i <= lastTimer; i++) {
        clearInterval(i);
    }
    // 显示分数版
    endEl.style.display = "block";
    endEl.style.zIndex = 2;
    currentScoreEl.innerHTML = num;
    // 记录判断最高分
    if (localStorage.fen == undefined) {
        localStorage.fen = num;
        console.log(localStorage.fen);
    };
    // console.log(localStorage.fen);
    if (num > localStorage.fen) {
        localStorage.fen = num;
    };
    // 显示最高分
    bestScore.innerHTML = localStorage.fen;
    // 4.将点击事件置空
    bgEl.onclick = null;

}


// 11封装碰撞检测的函数
function crash(pipe) {
    // left
    var minleft = pipe.offsetParent.offsetLeft - birdImg.offsetWidth;
    var maxleft = pipe.offsetParent.offsetLeft + pipe.offsetWidth;
    // top
    var mintop = pipe.offsetTop - birdImg.offsetHeight;
    var maxtop = pipe.offsetTop + pipe.offsetHeight;
    // 碰撞判断
    if (birdImg.offsetLeft > minleft && birdImg.offsetLeft < maxleft && birdImg.offsetTop > mintop && birdImg.offsetTop < maxtop) {
        // 游戏结束
        gameOverfunction();

    }
}